<template>
	<view class="courseDetails-pages">
		<view class="video-box">
			<video id="myVideo" :src="theoryVideo" @error="videoErrorCallback"  enable-danmu danmu-btn controls  :poster="theoryPath">
			</video>
			<view class="video-cont">
				<view class="video-name">
					{{infoData.theoryTitle}}
				</view>
				<view class="ds">
					学习时长:{{infoData.learningOften}}分钟
				</view>
			</view>
		</view>
		<view class="Richtext" >
			<view class="Richtext-header flex-between flex-y-center">
				<text class="title">课程详情</text>
			</view>
			<view class="Richtext-cont" v-html="infoData.description">
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
			infoData:{},
			theoryVideo:null,
			theoryPath:null,
			}
		},
		onLoad(option) {
		   //option 上个页面传递的参数。
			this.theoryId = option.theoryId; //上个页面传递的参数。
			this.getList();
		},
		methods: {
			async getList(){
				// 根据id查询中医教程数据
				const {
					data,
					code
				} = await this.muajax.getQueryTheoryId({}, {
					urlRewrite: url => `${url}/${this.theoryId}`
				});
				this.infoData=data
				if(this.infoData.theoryVideo){
					this.getImg(this.infoData.theoryVideo,'theoryVideo')
				}
				if(this.infoData.theoryPath){
					this.getImg(this.infoData.theoryPath,'theoryPath')
				}
				
			},
			async getImg(id,src){
				const res=await this.muajax.uploadlistByIds({}, {
					urlRewrite: url => `${url}/${id}`
				});
				if(src=='theoryVideo'){
					this.theoryVideo=res.data[0].url
				}else{
					this.theoryPath=res.data[0].url
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.video-box {
		background: #fff;
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;

		#myVideo {
			width: 100%;

		}
	}

	.video-name {
		font-size: 36rpx;
	}

	.ds {
		color: #666;
	}

	.video-cont {
		padding: 20rpx 0px;
		position: relative;
	}

	.Richtext {
		
		width: 690rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin: 0px auto;
		margin-top: 30rpx;
		min-height: 400rpx;

		.Richtext-header {
			border-bottom: 1px solid #f1f1f1;
			height: 88rpx;
			padding: 0px 20rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
			}

			.more-btn {
				padding: 10rpx;
				background-color: #5ebcbc;
				border-radius: 10rpx;
				color: #fff;
			}
		}
	}

	.Richtext-cont {
		padding: 20rpx;
		box-sizing: border-box;
	}
</style>